﻿<!DOCTYPE HTML>
<html>
<head>
    <title>客户标准运费</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.bsgrid-1.37/merged/bsgrid.all.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.bsgrid-1.37/css/skins/grid_bootstrap.min.css" rel="stylesheet" />

    <link href="~/Hdmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="~/Hdmin/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="~/Hdmin/css/animate.css" rel="stylesheet">
    <link href="~/Hdmin/css/style.css?v=4.1.0" rel="stylesheet">


    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }

        #button button {
            font-family: 华文行楷;
            font-size: 16px;
            line-height: 14px;
        }

        .row label {
            font-family: 华文行楷;
            font-size: 16px;
        }

        .lol th {
            font-family: 华文行楷;
            font-size: 16px;
        }

        .row input {
            width:185px;
            height: 34px;
        }
        .row select {
            width:185px;
            height: 34px;
        }
    </style>
</head>
<body>

    <div class="col-sm-12" style="margin-top:20px;">
       
        @*左边树形图*@
        <div class="col-sm-2">
            <div id="jstree1" style="margin-left:35%;font-family:华文行楷;font-size:18px;">
                <ul>
                    <li class="jstree-open">
                        所有客户
                        <ul>
                            <li data-jstree='{"type":"css"}' onclick="Search('委托单位')">公共客户报价</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div>

            <div class="col-sm-10" id="modInsertExaminee">
                @*上方*@
                <div class="col-sm-10">
                    <table class="table table-hover choosetable" id="tabOffer">
                        <thead>
                            <tr class="lol">
                                <th w_index="OfferID" w_check="true"></th>
                                <th w_num="total_line">序号</th>
                                <th w_index="OfferDate">报价日期</th>
                                <th w_index="TakeEffectDate">生效日期</th>
                                <th w_index="LoseEfficacyDate">失效日期</th>
                                <th w_index="WhetherShuii">是否含税</th>
                                <th w_index="Remark">备注</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="col-lg-10" style="line-height:100px;">
                    <div class="col-lg-10 col-sm-10 col-md-10 text-right" id="button" style="text-align:left">
                        <button class="btn btn-brown" style="width:122px;" id="btnRefresh"><i class="glyphicon glyphicon-floppy-saved" style="font-size:14px;"></i>刷新</button>
                        <button class="btn btn-brown" style="width:122px;" id="btnInsert"><i class="glyphicon glyphicon-floppy-remove" style="font-size:14px;"></i>新增</button>
                        <button class="btn btn-brown" style="width:122px;" id="btnUpdate"><i class="glyphicon glyphicon-floppy-remove" style="font-size:14px;"></i>编辑</button>
                        <button class="btn btn-brown" style="width:122px;" id="btnDelete"><i class="glyphicon glyphicon-floppy-remove" style="font-size:14px;"></i>删除</button>
                        <button class="btn btn-brown" style="width:84px;" id="btnPrint"><i class="glyphicon glyphicon-check" style="font-size:14px;"></i>打印</button>
                        <button class="btn btn-brown" style="width:84px;" id="btnLead"><i class=" glyphicon glyphicon-share-alt" style="font-size:14px;"></i>导出</button>
                    </div>
                </div>

                @*下方*@
                <div class="col-sm-10">
                    <table class="table table-hover choosetable" id="tabOfferDetail">
                        <thead>
                            <tr class="lol">
                                <th w_index="OfferID" w_hidden="true"></th>
                                <th w_index="OfferDetailID" w_check="true"></th>
                                <th w_num="total_line">序号</th>
                                <th w_index="HaulWayDescription">运输路线</th>
                                <th w_index="ExpenseName">费用项目</th>
                                <th w_index="CabinetType">箱型</th>
                                <th w_index="EtryClasses">报关方式</th>
                                <th w_index="Money">金额</th>
                                <th w_index="Currency">币种</th>
                                <th w_index="StaffName">报价人</th>
                                <th w_index="Remark">备注</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>

            @*报价明细 新增/编辑模态框*@
            <div class="row">    @*尽量用栅格布局来调样式*@
                <div class="modal bs-example-modal-sm" id="ModalClientMeasure">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width:690px;height:328px;">
                            <div class="modal-header" style="height:47px;">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title" style="font-family:华文行楷;"><span class="glyphicon glyphicon-ok"></span></h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form" id="J_Forme" action="/ClientManage/ClientManage/SaveClientMeasure" method="post">
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">运输路线</label>
                                        <select id="HaulWayID" name="HaulWayID" style="margin-left:96px;margin-top:-26px;" type="text" class="form-control"></select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">费用项目</label>
                                        <input type="text" class="form-control" style="margin-left:96px;margin-top:-26px;" value="运费" readonly />
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">报关方式</label>
                                        <select type="text" style="margin-left:96px;margin-top:-26px;" class="form-control" id="EtryClasses" name="EtryClasses">
                                            <option value="">----请选择----</option>  
                                            <option value="自理报关">自理报关</option>
                                            <option value="直接代理报关">直接代理报关</option>
                                            <option value="间接代理报关">间接代理报关</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">金额</label>
                                        <input id="Money" name="Money" style="margin-left:96px;margin-top:-26px;" type="text" class="form-control" onchange="if (/\D/.test(this.value)) { layer.alert('只能输入数字', { icon: 5, title: '提示' }); this.value = ''; }" maxlength="7"/>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">箱型</label>
                                        <select type="text" style="margin-left:96px;margin-top:-26px;" class="form-control" id="CabinetType" name="CabinetType">
                                            <option value="">----请选择----</option>
                                            <option value="20GP">20GP</option>
                                            <option value="40GP">40GP</option>
                                            <option value="60GP">60GP</option>
                                            <option value="80GP">80GP</option>
                                            <option value="100GP">100GP</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">箱量</label>
                                        <input id="BoxQuantity" name="BoxQuantity" style="margin-left:96px;margin-top:-26px;" type="text" class="form-control" readonly/>
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label" style="font-family:华文行楷;">报价人</label>
                                        <input type="text" class="form-control" style="margin-left:96px;margin-top:-26px;" id="StaffID" name="StaffID" value="@ViewBag.AccountName" readonly/>
                                    </div>
                                    <div class="col-sm-12">
                                        <label class="control-label" style="font-family:华文行楷;">备注</label>
                                        <input id="Remark" name="Remark" style="margin-left:96px;margin-top:-26px;width:498px;" type="text" class="form-control" />
                                    </div>
                                    <div class="col-sm-12" style="font-family: 华文行楷;font-size:18px;margin-left:424px;margin-top:18px;">
                                        <button id="BtnEnsure" type="button" class="btn btn-primary">确定</button>
                                        <button id="BtnAmend" type="button" class="btn btn-info">修改</button>
                                        <button type="button" class="btn btn-danger" data-dismiss="modal" style="margin-left:77px;margin-top:-61px;">关闭</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script src="~/Hdmin/js/jquery.min.js?v=2.1.4"></script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script src="~/Hdmin/js/plugins/jsTree/jstree.min.js"></script>
    <script src="~/Content/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="~/Content/jquery.bsgrid-1.37/builds/merged/bsgrid.all.min.js"></script>
    <script src="~/Content/jquery.bsgrid-1.37/builds/js/lang/grid.zh-CN.min.js"></script>
    <script src="~/Content/layer/layer.js"></script>
    <script src="~/Content/js/combobox.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/customfunction.js"></script>



    <script>
        var tabOffer;
        var tabOfferDetail;

        //事件加载事件
        $(function () {

            //绑定项目名称下拉框
            createSelect("ExpenseID", "SelectExpense");
            //绑定运输路线下拉框
            createSelect("HaulWayID", "SelectHaulWay");

            $('#jstree1').jstree({
                'core': {
                    'check_callback': true
                },
                'plugins': ['types', 'dnd'],
                'types': {
                    'default': {
                        'icon': 'fa fa-folder'
                    },
                    'html': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'svg': {
                        'icon': 'fa fa-file-picture-o'
                    },
                    'css': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'img': {
                        'icon': 'fa fa-file-image-o'
                    },
                    'js': {
                        'icon': 'fa fa-file-text-o'
                    }

                }
            })
            setTimeout(function () {
                $("#j1_1_anchor").attr('onclick', "Search('')")
            },500)


            //初始化表格数据
            tabOffer = $.fn.bsgrid.init("tabOffer", {
                url: "SelectOffer",
                autoLoad: true,//是否自动加载
                pageSizeSelect: true,//分页大小选择下拉框
                pageSize: 5,//初始化每一页数据条数
                stripeRows: true,//隔行换色
                rowHoverColor: true,//鼠标滑过变色
                pagingLittleToolbar: true,//精简的图标按钮分页工具条
                displayBlankRows: true,//不显示空白行
                event: {
                    //当前行事件
                    customRowEvents: {
                        //(record行记录值,rowIndex行索引值,trObj:tr目标,options选择的东西)
                        click: function (record, rowIndex, trObj, options) {
                            Check("#tabOffer tr", rowIndex + 1, record);
                            tabOfferDetail.search("OfferID=" + record.OfferID);  //要把这个ID传到控制器进行查询
                            OfferID = record.OfferID;//给下方表格打印水晶报表的ID赋值
                        }
                    }
                }
            });

            //下方表格数据
            tabOfferDetail = $.fn.bsgrid.init('tabOfferDetail', {
                url: 'SelectOfferDetail',
                stripeRows: true,//隔行变色
                autoLoad: false,//是否自动加载
                rowHoverColor: true,//划过行变色
                pageSize: 5,
                pageSizeSelect: false,//是否选择分页页数下拉框
                event: {
                    //当前行事件
                    customRowEvents: {
                        //(record行记录值,rowIndex行索引值,trObj:tr目标,options选择的东西)
                        click: function (record, rowIndex, trObj, options) {
                            Check("#tabOfferDetail tr", rowIndex + 1, record);
                        }
                    }
                }
            });
        })

        //箱型的value值触发改变箱量文本框的值（改变事件）
        $("#CabinetType").change(function () {
            if ($("#CabinetType").val() == "") {
                $("#BoxQuantity").val(0);
            }
            if ($("#CabinetType").val() == "20GP") {
                $("#BoxQuantity").val(1000);
            }
            if ($("#CabinetType").val() == "40GP") {
                $("#BoxQuantity").val(2000);
            }
            if ($("#CabinetType").val() == "60GP") {
                $("#BoxQuantity").val(3000);
            }
            if ($("#CabinetType").val() == "80GP") {
                $("#BoxQuantity").val(4000);
            }
            if ($("#CabinetType").val() == "100GP") {
                $("#BoxQuantity").val(5000);
            }
        })

        //点击新增，弹出新增模态框
        $("#btnInsert").click(function () {
            var check = $("#tabOffer :checkbox:checked");
            if (check.length==0) {
                layer.alert("请先选择报价类型!");
            }
            else if (check.length==1) {
                $("#ModalClientMeasure .modal-title").html('<span class="glyphicon glyphicon-th-list"></span> 新增报价路线');
                $("#BtnEnsure").css("display", "block");//显示确定按钮
                $("#BtnAmend").css("display", "none");//隐藏修改按钮   

                $("#HaulWayID").val(0);//清空输入框
                $("#ExpenseID").val(0);
                $("#EtryClasses").val("");
                $("#Money").val("");
                $("#CabinetType").val("");
                $("#BoxQuantity").val(0);
                $("#Remark").val("");

                $("#ModalClientMeasure").modal();
            }
            else {
                layer.alert("只能选择一条数据!");
            }        
        })

        //点击新增弹出框确定按钮，保存数据
        $("#BtnEnsure").click(function () {
            var HaulWayID = $("#HaulWayID").val();
            var ExpenseID = $("#ExpenseID").val();
            var EtryClasses = $("#EtryClasses").val();
            var Money = $("#Money").val();
            var CabinetType = $("#CabinetType").val();

            if (HaulWayID == 0 || ExpenseID == 0 || EtryClasses == "" || Money == "" || CabinetType=="") {
                layer.alert("请把重要信息填写完整!");
            }
            else {
                var OfferID = $("#tabOffer :checkbox:checked").val();
                $("#J_Forme").attr("action", "SaveClientMeasure?OfferID=" + OfferID); //表单提交传参

                $("#J_Forme").ajaxSubmit(function (msg) {
                    if (msg == "success") {
                        layer.alert("保存成功", { icon: 1, title: '提示' });
                        $("#ModalClientMeasure").modal("hide");
                        tabOfferDetail.refreshPage();
                    }
                    else {
                        alert("保存出错");
                    }
                })
            }
        })

        //点击编辑按钮，弹出编辑模态框，回填数据
        $("#btnUpdate").click(function () {
            var check = $("#tabOfferDetail :checkbox:checked");
            var OfferDetailID = $("#tabOfferDetail :checkbox:checked").val();
            if (check.length==0) {
                layer.alert("请选择一条数据!");
            }
            else if (check.length==1) {
                $("#ModalClientMeasure .modal-title").html('<span class="glyphicon glyphicon-th-list"></span> 修改报价路线');
                $("#BtnEnsure").css("display", "none");//隐藏确定按钮
                $("#BtnAmend").css("display", "block");//显示修改按钮   

                $.post("SelectOfferDetail", { OfferDetailID: OfferDetailID, AAA: "AAA" }, function (msg) {  //表单回填数据,参数为表格主键ID,一个为随便声明的，然后传过去控制器  控制器查出来的数据跟页面的name值一样,就可以回填
                    loadDatatoForm("J_Forme", msg[0]); //J_Form  from表单的ID
                    $("#ModalClientMeasure").modal();//弹出模态框
                })
            }
            else {
                layer.alert("只能选择一条数据!");
            }
        })

        //点击修改按钮，保存修改的数据
        $("#BtnAmend").click(function () {
            var OfferDetailID = $("#tabOfferDetail :checkbox:checked").val();
            var HaulWayID = $("#HaulWayID").val();
            var EtryClasses = $("#EtryClasses").val();
            var Money = $("#Money").val();
            var CabinetType = $("#CabinetType").val();
            var BoxQuantity = $("#BoxQuantity").val();
            var Remark = $("#Remark").val();

            if (HaulWayID == 0 || EtryClasses == "" || Money == "" || CabinetType=="") {
                layer.alert("请把信息填写完整!");
            }
            else {
                $.post("UpdateClientMeasure", { OfferDetailID: OfferDetailID, HaulWayID: HaulWayID, EtryClasses: EtryClasses, Money: Money, CabinetType: CabinetType, BoxQuantity: BoxQuantity, Remark: Remark }, function (msg) {
                    if (msg == "success") {
                        layer.alert("修改成功!");
                        $("#ModalClientMeasure").modal('hide');
                        tabOfferDetail.refreshPage();
                    }
                    else {
                        layer.alert("修改失败，请重新检查一遍!");
                    }
                })
            }
        })

        //点击删除按钮，删除所选中的数据
        $("#btnDelete").click(function () {
            var Check = $("#tabOfferDetail input[type='checkbox']:checked");

            if (Check.length == 0) {
                layer.alert("请选择需要删除的报价明细!");
            }
            else if (Check.length > 0) {
                var OfferDetailID = $("#tabOfferDetail input:checked");
                layer.confirm("确定删除选中的报价明细吗？",
               { icon: 3, btn: ['确定', '取消'] }, function (layerIndex) {
                   layer.close(layerIndex);
                   for (var i = 0; i < Check.length; i++) {//for循环实现批量删除
                       $.ajax({
                           url: "DeleteClientMeasure?OfferDetailID=" + Check[i].value,//选择的checkbox的value值
                           type: "get",//数据传输通道的类型
                           async: false,
                           dataType: "json",//传输的数据的类型
                           success: function (data) {//直接理解为回调函数
                               if (data == "success") {
                                   layer.alert("删除成功!");
                                   tabOfferDetail.refreshPage();
                               } else {
                                   layer.alert("删除失败！");
                               }
                           }
                       });
                   }
               })
            }
        })

        //点击打印按钮，打印数据(选中多少条，就打印多少条，不选就全部打印)
        $("#btnPrint").click(function () {
            var myArray = new Array(); //声明一个数组
            var OfferID = $("#tabOffer input:checked").val();
            var check = $("#tabOfferDetail tbody input:checked");//获取表格中checkbox被选中的个数
            for (var i = 0; i < check.length; i++) {
                myArray[i] = check[i].value;
            }
            layer.confirm("确定要打印当前数据吗？", {
                icon: 3,
                btn: ["确定", "取消"]
            }, function (layerIndex) {
                layer.close(layerIndex);
                window.open("PrintClientMeasure?myArray=" + myArray + "&OfferID=" + OfferID);
            });
        })

        //点击导出按钮，导出数据
        $("#btnLead").click(function () {
            var myArray = new Array(); //声明一个数组
            var OfferID = $("#tabOffer input:checked").val();
            var check = $("#tabOfferDetail input:checked");//获取表格中checkbox被选中的个数
            for (var i = 0; i < check.length; i++) {
                myArray[i] = check[i].value;
            }
            layer.confirm("确定要导出当前数据吗？", {
                icon: 3,
                btn: ["确定", "取消"]
            }, function (layerIndex) {
                layer.close(layerIndex);
                window.open("ExportClientMeasure?myArray=" + myArray + "&OfferID=" + OfferID);
            });
        })






        //点击刷新按钮，刷新页面
        $("#btnRefresh").click(function () {
            location.reload();
        })



    </script>

</body>

</html> 